<template>
  <div class="enhanced-bank-card-example">
    <div class="card">
      <div class="card-header">
        <h5 class="mb-0">
          <i class="bi bi-credit-card-2-front text-primary me-2"></i>
          增强版银行卡验证示例
        </h5>
      </div>
      <div class="card-body">
        <!-- 功能介绍 -->
        <div class="alert alert-info mb-4">
          <div class="d-flex">
            <div class="flex-shrink-0">
              <i class="bi bi-lightbulb-fill"></i>
            </div>
            <div class="flex-grow-1 ms-3">
              <h6 class="alert-heading">增强功能</h6>
              <ul class="mb-0">
                <li>支持内置银行和自定义银行的统一验证</li>
                <li>智能银行名称标准化和别名匹配</li>
                <li>自定义银行卡号长度规范验证</li>
                <li>实时BIN码识别和银行匹配</li>
                <li>完整的验证结果和错误提示</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 银行卡验证表单 -->
        <div class="row">
          <div class="col-md-6">
            <h6 class="text-secondary mb-3">
              <i class="bi bi-input-cursor me-2"></i>
              输入信息
            </h6>
            
            <div class="mb-3">
              <label class="form-label">银行卡号 <span class="text-danger">*</span></label>
              <input 
                type="text" 
                class="form-control" 
                :class="{
                  'is-valid': validation.result && validation.result.valid,
                  'is-invalid': validation.result && !validation.result.valid && formData.cardNumber
                }"
                v-model="formData.cardNumber"
                @input="handleCardNumberInput"
                placeholder="请输入银行卡号"
                maxlength="23"
              >
              <div class="form-text">
                支持13-19位银行卡号，自动格式化显示
              </div>
            </div>
            
            <div class="mb-3">
              <label class="form-label">银行名称 <span class="text-danger">*</span></label>
              <input 
                type="text" 
                class="form-control" 
                :class="{
                  'is-valid': validation.result && validation.result.valid,
                  'is-invalid': validation.result && !validation.result.valid && formData.bankName
                }"
                v-model="formData.bankName"
                @input="handleBankNameInput"
                placeholder="请输入银行名称"
                list="bankList"
              >
              <datalist id="bankList">
                <option v-for="bank in filteredBanks" :key="bank.name" :value="bank.name">
              </datalist>
              <div class="form-text">
                支持银行全称、简称、英文名称和别名
              </div>
            </div>
            
            <!-- 银行搜索建议 -->
            <div v-if="bankSuggestions.length > 0" class="mb-3">
              <small class="text-muted">建议的银行：</small>
              <div class="mt-1">
                <button 
                  v-for="bank in bankSuggestions.slice(0, 5)" 
                  :key="bank.name"
                  class="btn btn-sm btn-outline-secondary me-1 mb-1"
                  @click="selectBank(bank.name)"
                >
                  {{ bank.name }}
                  <span v-if="bank.isCustom" class="badge bg-info ms-1">自定义</span>
                </button>
              </div>
            </div>
            
            <!-- 实时验证按钮 -->
            <div class="d-flex gap-2">
              <button 
                class="btn btn-primary" 
                @click="validateCard"
                :disabled="!formData.cardNumber || !formData.bankName"
              >
                <i class="bi bi-check-circle me-1"></i>
                验证银行卡
              </button>
              <button class="btn btn-outline-secondary" @click="clearForm">
                <i class="bi bi-arrow-clockwise me-1"></i>
                清空
              </button>
              <button class="btn btn-outline-info" @click="fillExample">
                <i class="bi bi-lightbulb me-1"></i>
                示例
              </button>
            </div>
          </div>
          
          <div class="col-md-6">
            <h6 class="text-secondary mb-3">
              <i class="bi bi-clipboard-check me-2"></i>
              验证结果
            </h6>
            
            <!-- 验证结果显示 -->
            <div v-if="validation.result" class="validation-result">
              <!-- 整体状态 -->
              <div class="alert" :class="validation.result.valid ? 'alert-success' : 'alert-danger'" role="alert">
                <div class="d-flex align-items-center">
                  <i :class="validation.result.valid ? 'bi bi-check-circle-fill' : 'bi bi-x-circle-fill'" class="me-2"></i>
                  <strong>{{ validation.result.valid ? '验证通过' : '验证失败' }}</strong>
                </div>
                <div class="mt-2 small">
                  {{ validation.result.message }}
                </div>
              </div>
              
              <!-- 详细验证信息 -->
              <div class="card border-0 bg-light">
                <div class="card-body p-3">
                  <h6 class="card-title text-secondary mb-3">详细信息</h6>
                  
                  <!-- 验证项目 -->
                  <div class="row g-3">
                    <div class="col-6">
                      <div class="d-flex align-items-center">
                        <span class="badge me-2" :class="validation.result.luhnValid ? 'bg-success' : 'bg-danger'">
                          <i :class="validation.result.luhnValid ? 'bi bi-check' : 'bi bi-x'"></i>
                        </span>
                        <small>Luhn校验</small>
                      </div>
                    </div>
                    <div class="col-6">
                      <div class="d-flex align-items-center">
                        <span class="badge me-2" :class="validation.result.bankMatched ? 'bg-success' : 'bg-danger'">
                          <i :class="validation.result.bankMatched ? 'bi bi-check' : 'bi bi-x'"></i>
                        </span>
                        <small>银行匹配</small>
                      </div>
                    </div>
                  </div>
                  
                  <!-- 银行信息 -->
                  <div v-if="validation.result.standardBankName" class="mt-3">
                    <div class="row">
                      <div class="col-12 mb-2">
                        <strong class="text-primary">标准银行名称：</strong>
                        {{ validation.result.standardBankName }}
                      </div>
                      
                      <div v-if="validation.result.bankInfo" class="col-12">
                        <div class="d-flex align-items-center mb-2">
                          <strong class="me-2">银行类型：</strong>
                          <span class="badge" :class="validation.result.bankInfo.isCustom ? 'bg-info' : 'bg-secondary'">
                            {{ validation.result.bankInfo.isCustom ? '自定义银行' : '内置银行' }}
                          </span>
                        </div>
                        
                        <!-- 自定义银行详细信息 -->
                        <div v-if="validation.result.bankInfo.isCustom && validation.result.bankInfo.customInfo" class="mt-2">
                          <div class="small text-muted">
                            <div v-if="validation.result.bankInfo.customInfo.shortName" class="mb-1">
                              <strong>简称：</strong> {{ validation.result.bankInfo.customInfo.shortName }}
                            </div>
                            <div v-if="validation.result.bankInfo.customInfo.englishName" class="mb-1">
                              <strong>英文名：</strong> {{ validation.result.bankInfo.customInfo.englishName }}
                            </div>
                            <div v-if="validation.result.bankInfo.customInfo.binCode" class="mb-1">
                              <strong>BIN码：</strong> {{ validation.result.bankInfo.customInfo.binCode }}
                            </div>
                            <div v-if="validation.result.bankInfo.customInfo.cardLengthRule" class="mb-1">
                              <strong>卡号长度：</strong> {{ validation.result.bankInfo.customInfo.cardLengthRule }}
                            </div>
                            <div v-if="validation.result.bankInfo.customInfo.aliases && validation.result.bankInfo.customInfo.aliases.length > 0" class="mb-1">
                              <strong>别名：</strong> {{ validation.result.bankInfo.customInfo.aliases.join(', ') }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 无验证结果时的提示 -->
            <div v-else class="text-center text-muted py-5">
              <i class="bi bi-credit-card display-6 mb-3"></i>
              <p class="mb-0">请输入银行卡号和银行名称进行验证</p>
            </div>
          </div>
        </div>
        
        <!-- 支持的银行列表 -->
        <div class="mt-5">
          <h6 class="text-secondary mb-3">
            <i class="bi bi-list-check me-2"></i>
            支持的银行 ({{ allBanks.length }})
          </h6>
          
          <!-- 银行搜索 -->
          <div class="row mb-3">
            <div class="col-md-6">
              <div class="input-group">
                <span class="input-group-text">
                  <i class="bi bi-search"></i>
                </span>
                <input 
                  type="text" 
                  class="form-control" 
                  v-model="bankSearchKeyword"
                  placeholder="搜索银行名称、简称或BIN码"
                >
              </div>
            </div>
            <div class="col-md-6">
              <div class="btn-group" role="group">
                <input type="radio" class="btn-check" id="all-banks" v-model="bankFilter" value="all">
                <label class="btn btn-outline-primary" for="all-banks">全部</label>
                
                <input type="radio" class="btn-check" id="builtin-banks" v-model="bankFilter" value="builtin">
                <label class="btn btn-outline-primary" for="builtin-banks">内置</label>
                
                <input type="radio" class="btn-check" id="custom-banks" v-model="bankFilter" value="custom">
                <label class="btn btn-outline-primary" for="custom-banks">自定义</label>
              </div>
            </div>
          </div>
          
          <!-- 银行列表 -->
          <div class="row">
            <div v-for="bank in displayedBanks" :key="bank.name" class="col-md-4 col-lg-3 mb-2">
              <div class="card h-100 border-0 bg-light">
                <div class="card-body p-2">
                  <div class="d-flex justify-content-between align-items-start">
                    <div class="flex-grow-1">
                      <h6 class="card-title mb-1 small">{{ bank.name }}</h6>
                      <div class="d-flex gap-1">
                        <span class="badge" :class="bank.isCustom ? 'bg-info' : 'bg-secondary'" style="font-size: 0.7em;">
                          {{ bank.isCustom ? '自定义' : '内置' }}
                        </span>
                        <span v-if="bank.binCode" class="badge bg-warning" style="font-size: 0.7em;">
                          {{ bank.binCode }}
                        </span>
                      </div>
                    </div>
                    <button 
                      class="btn btn-sm btn-outline-primary" 
                      @click="selectBank(bank.name)"
                      title="选择此银行"
                    >
                      <i class="bi bi-check"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            
            <div v-if="displayedBanks.length === 0" class="col-12">
              <div class="text-center text-muted py-4">
                <i class="bi bi-search display-6 mb-2"></i>
                <p class="mb-0">未找到匹配的银行</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted, watch } from 'vue'
import { 
  validateBankCardEnhanced, 
  getAllSupportedBanks,
  searchBanks,
  formatCardNumber
} from '@/utils/enhancedBankCardValidator.js'

export default {
  name: 'EnhancedBankCardExample',
  setup() {
    // 响应式数据
    const formData = ref({
      cardNumber: '',
      bankName: ''
    })
    
    const validation = ref({
      result: null
    })
    
    const allBanks = ref([])
    const bankSearchKeyword = ref('')
    const bankFilter = ref('all')
    
    // 计算属性
    const filteredBanks = computed(() => {
      if (!formData.value.bankName) return []
      return searchBanks(formData.value.bankName).slice(0, 10)
    })
    
    const bankSuggestions = computed(() => {
      if (!formData.value.bankName || formData.value.bankName.length < 2) return []
      return searchBanks(formData.value.bankName).slice(0, 5)
    })
    
    const displayedBanks = computed(() => {
      let banks = allBanks.value
      
      // 按类型过滤
      if (bankFilter.value === 'builtin') {
        banks = banks.filter(b => !b.isCustom)
      } else if (bankFilter.value === 'custom') {
        banks = banks.filter(b => b.isCustom)
      }
      
      // 按关键词搜索
      if (bankSearchKeyword.value) {
        banks = searchBanks(bankSearchKeyword.value).filter(b => {
          if (bankFilter.value === 'builtin') return !b.isCustom
          if (bankFilter.value === 'custom') return b.isCustom
          return true
        })
      }
      
      return banks
    })
    
    // 方法
    const loadAllBanks = () => {
      const banks = getAllSupportedBanks()
      allBanks.value = banks.all
    }
    
    const handleCardNumberInput = () => {
      formData.value.cardNumber = formatCardNumber(formData.value.cardNumber)
      if (formData.value.cardNumber && formData.value.bankName) {
        validateCard()
      }
    }
    
    const handleBankNameInput = () => {
      if (formData.value.cardNumber && formData.value.bankName) {
        validateCard()
      }
    }
    
    const validateCard = () => {
      if (!formData.value.cardNumber || !formData.value.bankName) {
        validation.value.result = null
        return
      }
      
      validation.value.result = validateBankCardEnhanced(
        formData.value.cardNumber,
        formData.value.bankName
      )
    }
    
    const clearForm = () => {
      formData.value = {
        cardNumber: '',
        bankName: ''
      }
      validation.value.result = null
    }
    
    const selectBank = (bankName) => {
      formData.value.bankName = bankName
      if (formData.value.cardNumber) {
        validateCard()
      }
    }
    
    const fillExample = () => {
      // 使用一个示例银行卡号
      formData.value = {
        cardNumber: '6222 0202 0000 0000',
        bankName: '工商银行'
      }
      validateCard()
    }
    
    // 监听器
    watch(() => formData.value.cardNumber, () => {
      if (validation.value.result) {
        validateCard()
      }
    })
    
    watch(() => formData.value.bankName, () => {
      if (validation.value.result) {
        validateCard()
      }
    })
    
    // 生命周期
    onMounted(() => {
      loadAllBanks()
      
      // 监听银行信息更新事件
      window.addEventListener('bankInfoUpdated', () => {
        loadAllBanks()
      })
    })
    
    return {
      formData,
      validation,
      allBanks,
      bankSearchKeyword,
      bankFilter,
      filteredBanks,
      bankSuggestions,
      displayedBanks,
      handleCardNumberInput,
      handleBankNameInput,
      validateCard,
      clearForm,
      selectBank,
      fillExample
    }
  }
}
</script>

<style scoped>
.enhanced-bank-card-example {
  max-width: 1200px;
  margin: 0 auto;
}

.validation-result {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.badge {
  font-size: 0.75em;
}

.btn-check:checked + .btn-outline-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: white;
}

@media (max-width: 768px) {
  .enhanced-bank-card-example {
    padding: 10px;
  }
  
  .card-body {
    padding: 1rem;
  }
}
</style>